終於來到第一個網頁的內容結尾，通常結尾會有一個表尾，我們俗稱 footer，用來做最後的資訊用，但我個人比較喜歡簡單的樣式，所以就來寫一簡單的 footer 吧!!
畫面會如下方：

HTML 會是這樣

 <footer>
        <div class="footer">
            <div class="container">
                <p class="footer-text">Copyright © 2019 MusicIsLife All Rights Reserved.</p>
                <ul class="footer-menu">
                    <li><a href="#"><i class="fas fa-globe-americas"></i></a></li>
                    <li><a href="#"><i class="fab fa-facebook"></i></a></li>
                    <li><a href="#"><i class="fab fa-instagram"></i></a></li>
                    <li><a href="#"><i class="fab fa-twitter"></i></a></li>
                    <div class="clearfix"></div>
                </ul>
            </div>
        </div>
    </footer>

內容很簡單，就是一排文字加一排 icon，這邊又用到了 ul li，可見這個語法真的很常用也很好用呢!!
icon 也是到 fontawesome 複製的，5.0 以上的版本納入了 Branding，所以不用再上網找圖片跟後製囉!!

CSS 如下

.footer{
   background-color: #333;
   height: 100px;
   margin-top: 20px;
   //因為通常 footer 也跟 navbar 一樣會是固定的尺寸，所以這邊可以大膽的設定高度，為了區隔上方的內容，所以用了 margin-top
  .footer-text{
    float: left;
    font-size: $font-m;
    color: $navbar-color;
    line-height: 100px;
    //針對 footer-text 的文字做設定，讓它 footer 的左邊
  }
  .footer-menu{
    float: right;
    line-height: 100px;
     //讓 footer 裡面的連結圖示靠右對齊
    li{
      float: left;
      margin-right: 1em;
      //這邊的 li 的技巧跟上面選單的技巧一樣，就不再贅述
      a{
        font-size: $font-m;
        color: $navbar-color;
        cursor: pointer;
              }
     //設定 a 連結的內容
    }
  }
}

這樣 footer 就完成啦!!
這樣的呈現就會是一個比較完整的入口網站!
codepen 如連結 https://codepen.io/hnzxewqw/pen/JjPLmGN